<template>
    <strong>下雨/闪星的效果</strong>
    <div class="rain">
        <div v-for="(item, index) in rainNumber" :key="index" class="rain-item" ref="rainItem"
            :style="`transform:rotate(20deg);width:2px;height:5px;`">
            <div class="line" :style="`animationDelay:${index * 100}ms`"></div>
        </div>
    </div>

    <!-- 星星 -->
    <div class="star">
        <div v-for="(item, index) in starNumber" :key="index" class="star-item" ref="starItem"
            :style="`animationDelay:20ms;width:30px;height:30px;`">
            <img src="../assets/img/star.png" />
        </div>
    </div>
    <!-- <div class="meteor" :style="`transfrom:rotate(10deg)`">
		<div class="line" :style="`animationDelay:6s;width:30px;height:30px`">
			
		</div>

	</div> -->
</template>

<script setup>
import { onMounted } from 'vue';
const rainNumber = ref(100)
const starNumber = ref(50)
const rainItem = ref()
const starItem = ref()
const randomRain = () => {
    let rainArr = rainItem.value;
    // console.log(rainArr);
    rainArr.forEach((item) => {
        // console.log(item.children);
        item.style.top = Math.floor(Math.random() * 250 + 1) + "px";
        item.style.left = Math.floor(Math.random() * 700 + 1) + "px";
    });
}
const randomStar = () => {
    let starArr = starItem.value;
    // console.log(starArr);
    starArr.forEach((item) => {
        // console.log(item.children);
        item.style.top = Math.floor(Math.random() * 250 + 1) + "px";
        item.style.left = Math.floor(Math.random() * 700 + 1) + "px";
    });
}
onMounted(() => {
    randomStar()
    randomRain()
})
</script>

<style lang='scss' scoped>
/* // 下雨 */
.rain {
    width: 700px;
    height: 250px;
    position: relative;
    background: radial-gradient(at 50% 0%,
            rgba(6, 55, 111, 1) 0%,
            rgba(11, 26, 57, 1) 70%);

    .rain-item {
        position: absolute;
        width: 2px;
        height: 30px;
        /* // background: skyblue; */
        display: inline-block;
        display: inline-block;

        /* // overflow: hidden; */
        .line {
            animation: raining 2s infinite linear;
            position: absolute;
            content: "";
            top: -30px;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 183, 255, 0.7);
        }
    }
}

@keyframes raining {
    0% {
        top: -30px;
        opacity: 0;
    }

    50% {
        top: 0px;
        opacity: 1;
    }

    100% {
        top: 30px;
        opacity: 0;
    }
}

/* // 星星 */
.star {
    width: 700px;
    height: 250px;
    margin-top: 20px;
    position: relative;
    background: radial-gradient(at 0% 100%, rgba(9, 37, 61, 1) 20%, rgba(9, 31, 55, 1) 70%);

    .star-item {
        position: absolute;
        width: 4px;
        height: 4px;
        display: inline-block;
        animation: staring 2s infinite linear;
        /* // background: rgba(2,213,255,1); */
        border-radius: 50%;
    }
}

@keyframes staring {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* // .meteor{
// 	width: 720px;
// 	height: 200px;
// 	position: relative;
// 	.line{
// 		animation: meteoring 6s infinite linear;
// 		position: absolute;
// 		width: 2px;
// 		height: 200px;
// 		background: linear-gradient(
// 			to top,
// 			rgba(2,161,195,1),
// 			rgba(11,36,66,0.1)
// 		);
// 		border-radius: 2px;
// 		box-shadow: 0 10px 20px 0 #02a1c3;
// 		opacity: 0;
// 		&::before{
// 			width: 2px;
// 			height: 2px;
// 			content: "";
// 			position: absolute;
// 			bottom: 0;
// 			left: 0;
// 			border-radius: 50%;
// 			background: #00d0ff;
// 			box-shadow: 0 0 12px 5px #00d0ff;
// 		};
// 	};
// }
// @keyframes meteoring {
// 	0%{
// 		opacity: 0;
// 		top: -50px;
// 	}
// 	25%{
// 		opacity: 0.5;
// 		top: 0px;
// 	}
// 	50%{
// 		opacity: 0.8;
// 		top: 250px;
// 	}
// 	75%{
// 		opacity: 1;
// 		top: 500px;
// 	}
// 	100%{
// 		opacity: 0;
// 		top: 750px;
// 	}
// }*/
</style> 